﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}

@using Microsoft.AspNetCore.Antiforgery
@inject IAntiforgery Antiforgery
@{
    Layout = null;
    var token = Antiforgery.GetAndStoreTokens(Context);
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>面试管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="csrf-token" content="@token.RequestToken" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.8.18/dist/css/layui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="layui-form" style="margin:20px;">
  <div class="layui-inline">
    <input class="layui-input" name="userName" id="userName" placeholder="请输入人员名称">
  </div>
  <div class="layui-inline">
    <input class="layui-input" name="interviewer" id="interviewer" placeholder="请输入面试官姓名">
  </div>
  <button class="layui-btn" id="searchBtn" lay-submit lay-filter="searchForm">搜索</button>
  <button class="layui-btn layui-btn-primary" id="resetBtn">重置</button>
  <button class="layui-btn layui-btn-warm" id="exportBtn">导出</button>
</div>

<table class="layui-hide" id="userTable" lay-filter="userTableFilter"></table>

<script src="https://cdn.jsdelivr.net/npm/layui@2.8.18/dist/layui.js"></script>
<script>
layui.use(['table', 'form', 'layer', 'laydate'], function(){
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var laydate = layui.laydate;

  // 设置全局的AJAX请求头，添加令牌
  var token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
  layui.$.ajaxSetup({
    headers: {
      'RequestVerificationToken': token
    }
  });

  // 自定义验证规则
  form.verify({
    phone: [/^1[3-9]\d{9}$|^\d{3,4}-?\d{7,8}$/, '请输入正确的手机号或座机号']
  });

  table.render({
    elem: '#userTable',
    url: '/HumanResources/Interview/GetInterview',
    page: true,
    cols: [[
      {field:'personnelName', title:'人员名称', width:120},
      {field:'phone', title:'联系电话', width:140},
      {field:'affiliatedDepartment', title:'归属部门', width:100},
      {field:'definiteIntegral', title:'定级', width:80},
      {field:'interviewFeedback', title:'面试反馈', width:180},
      {field:'interviewResult', title:'面试结果', width:100, templet: function(d){ 
        if(d.interviewResult === '通过') return '<span class="layui-badge layui-bg-green">通过</span>';
        if(d.interviewResult === '未通过') return '<span class="layui-badge layui-bg-red">未通过</span>';
        if(d.interviewResult === '面试') return '<span class="layui-badge layui-bg-blue">面试</span>';
        return '<span class="layui-badge layui-bg-orange">备选</span>';
      }},
      {field:'interviewsNumber', title:'面试次数', width:100},
      {field:'interviewsTime', title:'面试时间', width:120, templet: function(d){
        return layui.util.toDateString(new Date(d.interviewsTime), 'yyyy-MM-dd');
      }},
      {field:'interviewer', title:'面试官', width:100},
      {title:'操作', width:220, templet: function(d){
        return '<a class="layui-btn layui-btn-xs" lay-event="invite">邀请面试</a>' +
               '<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="update">更新面试</a>';
      }}
    ]],
    response: {
      statusName: 'code',
      statusCode: 200,
      dataName: 'data'
    },
    parseData: function(res) {
      return {
        "code": 200,
        "msg": "",
        "count": res.length,
        "data": res
      };
    }
  });

  // 搜索
  document.getElementById('searchBtn').onclick = function(){
    table.reload('userTable', {
      where: {
        personnelName: document.getElementById('userName').value,
        interviewer: document.getElementById('interviewer').value
      },
      page: {curr: 1}
    });
  };

  // 重置
  document.getElementById('resetBtn').onclick = function(){
    document.getElementById('userName').value = '';
    document.getElementById('interviewer').value = '';
    table.reload('userTable', {where: {}, page: {curr: 1}});
  };

  // 导出
  document.getElementById('exportBtn').onclick = function(){
    window.location.href = '/HumanResources/Interview/Export';
  };

  // 监听操作栏
  table.on('tool(userTableFilter)', function(obj){
    if(obj.event === 'invite'){
      // 邀请面试
      openInviteDialog(obj.data);
    } else if(obj.event === 'update'){
      // 更新面试
      openUpdateDialog(obj.data);
    }
  });

  // 邀请面试弹框
  function openInviteDialog(data) {
    layer.open({
      type: 1,
      title: '邀请面试',
      area: ['900px', '700px'],
      content: getInviteFormHtml(),
      success: function(layero, index){
        layui.form.render(null, 'inviteForm');
        
        // 初始化日期选择器
        layui.laydate.render({
          elem: '#interviewTime',
          type: 'datetime',
          format: 'yyyy-MM-dd HH:mm:ss',
          trigger: 'click'
        });

        // 设置表单数据
        layui.form.val('inviteForm', {
          'PersonnelCode': generatePersonnelCode(),
          'PersonnelName': data.personnelName || '',
          'Phone': data.phone || '',
          'InterviewsNumber': 1,
          'InterviewsTime': layui.util.toDateString(new Date(), 'yyyy-MM-dd HH:mm:ss')
        });
        
        // 监听表单提交
        layui.form.on('submit(inviteSubmit)', function(formData){
          var data = formData.field;
          
          // 验证必填字段
          if (!data.PersonnelName || !data.Phone || !data.AffiliatedDepartment || 
              !data.PostWage || !data.Roles || !data.Interviewer || 
              !data.InterviewsTime || !data.DefiniteIntegral || !data.InterviewFeedback) {
            layer.msg('请填写所有必填字段');
            return false;
          }
          
          // 构造请求数据对象
          var requestData = {
            Id: 0,
            PersonnelCode: data.PersonnelCode,
            PersonnelName: data.PersonnelName,
            Phone: data.Phone,
            IdCard: data.IdCard || '',
            AffiliatedDepartment: data.AffiliatedDepartment,
            PostWage: data.PostWage,
            Roles: data.Roles,
            Interviewer: data.Interviewer,
            InterviewsTime: new Date(data.InterviewsTime).toISOString(),
            InterviewsNumber: parseInt(data.InterviewsNumber) || 1,
            DefiniteIntegral: data.DefiniteIntegral,
            DefiniteLevel: data.DefiniteLevel || '',
            ExpectedSalary: data.ExpectedSalary || '',
            InterviewResult: "待面试",
            InterviewFeedback: data.InterviewFeedback,
            Remark: data.Remark || ''
          };
          
                      // 发送请求到后端
            layui.$.ajax({
              url: '/HumanResources/Interview/AddInterview',
              type: 'POST',
              contentType: 'application/json',
            data: JSON.stringify(requestData),
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
            },
            success: function(res){
              if(res > 0){
                layer.msg('邀请面试成功');
                layer.close(index);
                table.reload('userTable');
              } else {
                layer.msg('邀请面试失败');
              }
            },
            error: function(xhr, status, error){
              console.error('发送的数据:', requestData);
              console.error('状态码:', xhr.status);
              console.error('响应内容:', xhr.responseText);
              layer.msg('提交失败，请检查数据是否完整');
            }
          });
          return false;
        });
      }
    });
  }

  // 更新面试弹框
  function openUpdateDialog(data) {
    layer.open({
      type: 1,
      title: '更新面试',
      area: ['900px', '700px'],
      content: getUpdateFormHtml(),
      success: function(layero, index){
        layui.form.render(null, 'updateForm');
        
        // 初始化日期选择器
        layui.laydate.render({
          elem: '#updateInterviewTime',
          type: 'datetime',
          format: 'yyyy-MM-dd HH:mm:ss',
          trigger: 'click'
        });

        // 设置表单数据
        layui.form.val('updateForm', {
          'PersonnelCode': data.personnelCode,
          'PersonnelName': data.personnelName,
          'Phone': data.phone,
          'IdCard': data.idCard || '',
          'AffiliatedDepartment': data.affiliatedDepartment,
          'PostWage': data.postWage,
          'Roles': data.roles,
          'Interviewer': data.interviewer,
          'InterviewsTime': data.interviewsTime,
          'InterviewsNumber': data.interviewsNumber,
          'DefiniteIntegral': data.definiteIntegral,
          'DefiniteLevel': data.definiteLevel || '',
          'ExpectedSalary': data.expectedSalary || '',
          'InterviewResult': data.interviewResult,
          'InterviewFeedback': data.interviewFeedback,
          'Remark': data.remark || ''
        });

        // 监听表单提交
        layui.form.on('submit(updateSubmit)', function(formData){
          var formFieldData = formData.field;
          
          // 验证必填字段
          if (!formFieldData.PersonnelName || !formFieldData.Phone || !formFieldData.AffiliatedDepartment || 
              !formFieldData.PostWage || !formFieldData.Roles || !formFieldData.Interviewer || 
              !formFieldData.InterviewsTime || !formFieldData.DefiniteIntegral || !formFieldData.InterviewFeedback) {
            layer.msg('请填写所有必填字段');
            return false;
          }
          
          // 构造完整的请求数据
          var requestData = {
            Id: data.id || 0,
            PersonnelCode: formFieldData.PersonnelCode,
            PersonnelName: formFieldData.PersonnelName,
            Phone: formFieldData.Phone,
            IdCard: formFieldData.IdCard || '',
            AffiliatedDepartment: formFieldData.AffiliatedDepartment,
            PostWage: formFieldData.PostWage,
            Roles: formFieldData.Roles,
            Interviewer: formFieldData.Interviewer,
            InterviewsTime: new Date(formFieldData.InterviewsTime).toISOString(),
            InterviewsNumber: parseInt(formFieldData.InterviewsNumber) || 1,
            DefiniteIntegral: formFieldData.DefiniteIntegral,
            DefiniteLevel: formFieldData.DefiniteLevel || '',
            ExpectedSalary: formFieldData.ExpectedSalary || '',
            InterviewResult: formFieldData.InterviewResult || "待面试",
            InterviewFeedback: formFieldData.InterviewFeedback,
            Remark: formFieldData.Remark || ''
          };

                      // 发送请求到后端
            layui.$.ajax({
              url: '/HumanResources/Interview/UpdateInterview',
              type: 'POST',
              contentType: 'application/json',
            data: JSON.stringify(requestData),
            success: function(res){
              if(res > 0){
                layer.msg('更新面试成功');
                layer.close(index);
                table.reload('userTable');
              } else {
                layer.msg('更新面试失败');
              }
            },
            error: function(xhr, status, error){
              console.error('发送的数据:', requestData);
              console.error('状态码:', xhr.status);
              console.error('响应内容:', xhr.responseText);
              layer.msg('更新失败，请检查数据是否完整');
            }
          });
          return false;
        });
      }
    });
  }

  // 生成随机人员编码
  function generatePersonnelCode() {
    const prefix = 'STAFFE';
    const now = new Date();
    const yyyyMMdd = now.getFullYear().toString()
        + String(now.getMonth() + 1).padStart(2, '0')
        + String(now.getDate()).padStart(2, '0');
    const rand = Math.floor(Math.random() * 10000).toString().padStart(4, '0');
    return prefix + yyyyMMdd + rand;
  }

  // 邀请面试表单HTML
  function getInviteFormHtml() {
    return `<div class="layui-form" lay-filter="inviteForm" style="padding: 20px;">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>人员编码</label>
          <div class="layui-input-inline">
            <input type="text" name="PersonnelCode" class="layui-input" lay-verify="required" readonly>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>人员名称</label>
          <div class="layui-input-inline">
            <input type="text" name="PersonnelName" class="layui-input" lay-verify="required">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">证件信息</label>
          <div class="layui-input-inline">
            <input type="text" name="IdCard" placeholder="暂无信息" class="layui-input">
          </div>
        </div>
      </div>
      
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>联系电话</label>
          <div class="layui-input-inline">
            <input type="text" name="Phone" class="layui-input" lay-verify="required">
          </div>
        </div>
      </div>
      
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>归属部门</label>
          <div class="layui-input-inline">
            <select name="AffiliatedDepartment" lay-verify="required" lay-search>
              <option value="">请选择归属部门</option>
              <option value="技术部">技术部</option>
              <option value="人事部">人事部</option>
              <option value="财务部">财务部</option>
              <option value="市场部">市场部</option>
              <option value="运营部">运营部</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>岗位</label>
          <div class="layui-input-inline">
            <select name="PostWage" lay-verify="required" lay-search>
              <option value="">请选择岗位</option>
              <option value="开发工程师">开发工程师</option>
              <option value="测试工程师">测试工程师</option>
              <option value="产品经理">产品经理</option>
              <option value="UI设计师">UI设计师</option>
              <option value="运维工程师">运维工程师</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>角色</label>
          <div class="layui-input-inline">
            <select name="Roles" lay-verify="required" lay-search>
              <option value="">请选择角色</option>
              <option value="初级">初级</option>
              <option value="中级">中级</option>
              <option value="高级">高级</option>
              <option value="资深">资深</option>
            </select>
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>面试官</label>
          <div class="layui-input-inline">
            <select name="Interviewer" lay-verify="required" lay-search>
              <option value="">请选择面试官</option>
              <option value="张三">张三</option>
              <option value="李四">李四</option>
              <option value="王五">王五</option>
              <option value="赵六">赵六</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>面试时间</label>
          <div class="layui-input-inline">
            <input type="text" name="InterviewsTime" class="layui-input" id="interviewTime" lay-verify="required" placeholder="请选择面试时间">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>面试次数</label>
          <div class="layui-input-inline">
            <input type="number" name="InterviewsNumber" value="1" class="layui-input" lay-verify="required|number" min="1">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>定级级别</label>
          <div class="layui-input-inline">
            <select name="DefiniteIntegral" lay-verify="required" lay-search>
              <option value="">请选择定级</option>
              <option value="P1">P1</option>
              <option value="P2">P2</option>
              <option value="P3">P3</option>
              <option value="P4">P4</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">定级职级</label>
          <div class="layui-input-inline">
            <input type="text" name="DefiniteLevel" placeholder="请输入定级职级层次名称" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">期望薪资</label>
          <div class="layui-input-inline">
            <input type="text" name="ExpectedSalary" placeholder="请输入期望薪资" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label"><span style="color: red;">*</span>面试反馈</label>
        <div class="layui-input-block">
          <textarea name="InterviewFeedback" placeholder="请输入内容" class="layui-textarea" lay-verify="required"></textarea>
        </div>
      </div>

      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
          <textarea name="Remark" placeholder="请输入备注" class="layui-textarea"></textarea>
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <button type="button" class="layui-btn" lay-submit lay-filter="inviteSubmit">确定</button>
        <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
      </div>
    </div>`;
  }

  // 更新面试表单HTML
  function getUpdateFormHtml() {
    return `<div class="layui-form" lay-filter="updateForm" style="padding: 20px;">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>人员编码</label>
          <div class="layui-input-inline">
            <input type="text" name="PersonnelCode" class="layui-input" lay-verify="required" readonly>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>人员名称</label>
          <div class="layui-input-inline">
            <input type="text" name="PersonnelName" class="layui-input" lay-verify="required">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">证件信息</label>
          <div class="layui-input-inline">
            <input type="text" name="IdCard" class="layui-input">
          </div>
        </div>
      </div>
      
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>联系电话</label>
          <div class="layui-input-inline">
            <input type="text" name="Phone" class="layui-input" lay-verify="required">
          </div>
        </div>
      </div>
      
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>归属部门</label>
          <div class="layui-input-inline">
            <select name="AffiliatedDepartment" lay-verify="required" lay-search>
              <option value="">请选择归属部门</option>
              <option value="技术部">技术部</option>
              <option value="人事部">人事部</option>
              <option value="财务部">财务部</option>
              <option value="市场部">市场部</option>
              <option value="运营部">运营部</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>岗位</label>
          <div class="layui-input-inline">
            <select name="PostWage" lay-verify="required" lay-search>
              <option value="">请选择岗位</option>
              <option value="开发工程师">开发工程师</option>
              <option value="测试工程师">测试工程师</option>
              <option value="产品经理">产品经理</option>
              <option value="UI设计师">UI设计师</option>
              <option value="运维工程师">运维工程师</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>角色</label>
          <div class="layui-input-inline">
            <select name="Roles" lay-verify="required" lay-search>
              <option value="">请选择角色</option>
              <option value="初级">初级</option>
              <option value="中级">中级</option>
              <option value="高级">高级</option>
              <option value="资深">资深</option>
            </select>
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>面试官</label>
          <div class="layui-input-inline">
            <select name="Interviewer" lay-verify="required" lay-search>
              <option value="">请选择面试官</option>
              <option value="张三">张三</option>
              <option value="李四">李四</option>
              <option value="王五">王五</option>
              <option value="赵六">赵六</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>面试时间</label>
          <div class="layui-input-inline">
            <input type="text" name="InterviewsTime" class="layui-input" id="updateInterviewTime" lay-verify="required" placeholder="请选择面试时间">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>面试次数</label>
          <div class="layui-input-inline">
            <input type="number" name="InterviewsNumber" class="layui-input" lay-verify="required|number" min="1">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>定级级别</label>
          <div class="layui-input-inline">
            <select name="DefiniteIntegral" lay-verify="required" lay-search>
              <option value="">请选择定级</option>
              <option value="P1">P1</option>
              <option value="P2">P2</option>
              <option value="P3">P3</option>
              <option value="P4">P4</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">定级职级</label>
          <div class="layui-input-inline">
            <input type="text" name="DefiniteLevel" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">期望薪资</label>
          <div class="layui-input-inline">
            <input type="text" name="ExpectedSalary" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label"><span style="color: red;">*</span>面试结果</label>
          <div class="layui-input-inline">
            <select name="InterviewResult" lay-verify="required" lay-search>
              <option value="">请选择结果</option>
              <option value="通过">通过</option>
              <option value="未通过">未通过</option>
              <option value="待面试">待面试</option>
              <option value="面试">面试</option>
              <option value="备选">备选</option>
            </select>
          </div>
        </div>
      </div>

      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label"><span style="color: red;">*</span>面试反馈</label>
        <div class="layui-input-block">
          <textarea name="InterviewFeedback" placeholder="请输入内容" class="layui-textarea" lay-verify="required"></textarea>
        </div>
      </div>

      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
          <textarea name="Remark" placeholder="请输入备注" class="layui-textarea"></textarea>
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <button type="button" class="layui-btn" lay-submit lay-filter="updateSubmit">确定</button>
        <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
      </div>
    </div>`;
  }
});
</script>
</body>
</html>
